<template>
    <el-dialog v-model="show" title="新建支付宝白名单" width="680" align-center>
        <div class="content">
            <div class="search">
                <div class="left">
                    <el-button type="primary" plain>全部设备</el-button>
                    <el-button plain>未绑定设备</el-button>
                </div>
                <div class="right">
                    <el-form style="margin-right:10px">
                        <el-form-item label="搜索条件" prop="name">
                            <el-input palceholder="请输入搜索条件"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button round color="#0071bb" :icon="Search">搜索</el-button>
                </div>
            </div>
            <div class="table">
                <el-table :data="tableData" style="width: 100%;">
                    <el-table-column type="selection" prop="" />
                    <el-table-column prop="activeTime" label="激活时间" />
                    <el-table-column prop="deviceName" label="设备名称" />
                    <el-table-column prop="deviceNo" label="设备编号" />
                    <el-table-column prop="productNo" label="生产编号" />
                </el-table>
                <!-- 底部分页 -->
                <div class="page_number">
                    <el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize"
                        :disabled="!pager.total" layout="prev, pager, next, jumper,total" :total="pager.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submit()" color="#0071bb">确定</el-button>
                <el-button @click="close()">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { Search} from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { defineProps, defineEmits } from 'vue';
const emit = defineEmits(['close', 'submit']);
const props = defineProps<{ type: number, formData: any }>();
// 取消
const close = () => {
    emit('close')
}
const submit = () => {
    emit('submit')
}
const tableData = ref()
// 初始化表格数据
const initData = () => {
    tableData.value = [
        {
            id: 1,
            activeTime: '2024-05-22',
            deviceName: '新颜路1号',
            deviceNo: '825662164621',
            productNo: '541654651616',
        }
    ]
}
const show = ref<boolean>(true)
// 分页
const pager = ref({
    currentPage: 1,
    pageSize: 10,
    total: 10,
})
// 改变pageSize
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
// 改变当前页码 currentPage
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
onMounted(() => {
    initData()
})
</script>

<style lang="scss" scoped>
.search{
    display: flex;
    justify-content: space-between;
}
.right{
    display: flex;
}

.table {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page_number {
    align-self: center;
}



.dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
}
</style>